import React from 'react';
import { Link } from 'react-router';
import { connect } from 'react-redux'
import _ from 'lodash';
import { Table, Tabs, Icon, Tag, Form,Select, Button, message, Modal, Input,DatePicker,Row ,Col} from 'antd';
const FormItem = Form.Item;
const Option = Select.Option;
import { fetchArgs,FetchURL,fetchData,removeData,changePage,check_rules,_validate,formItemLayout} from '../../store/actions';
const TabPane = Tabs.TabPane;

class _pane1 extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            user: this.props.user,
            curPage: 1,//当前页 默认为1
            countPerPage:10,//每页显示数量 默认为10
            systemLogData: [],
            SystemLogLen: 0,
            module: null,//模块
            name: null,//用户名
            startValue: null,
            endValue: null,
            endOpen: false
        };
        this.resetFields = this.resetFields.bind(this);
        this.fetchSystemLog=this.fetchSystemLog.bind(this);
        this.Search=this.Search.bind(this);
        this.disabledStartDate=this.disabledStartDate.bind(this);
        this.disabledEndDate=this.disabledEndDate.bind(this);
        this.onChange=this.onChange.bind(this);
        this.onStartChange=this.onStartChange.bind(this);
        this.onEndChange=this.onEndChange.bind(this);
        this.handleStartToggle=this.handleStartToggle.bind(this);
        this.handleEndToggle=this.handleEndToggle.bind(this);
    }
    /*
    * curPage：当前页 默认为1
    * countPerPage：每页显示数量 默认为10
    * */
    fetchSystemLog(module, name, timeBegin, timeEnd, curPage = 1, countPerPage = 10) {
        const _this = this;
        let _args = Object.assign({},fetchArgs);
        _args.URL = FetchURL.SYSTEMLOG;
        _args.IsAuth = true;
        _args.Opts = {
            curPage: curPage,
            countPerPage: countPerPage,
            module: module || '',
            name: name || '',
            timeBegin: timeBegin || '',
            timeEnd: timeEnd || ''
        };
        _args.Succ = function (res) {
            _this.setState({
                systemLogData: res.content.list,
                SystemLogLen: res.content.pager.totalCount
            });
        };
        _this.props.dispatch(fetchData(_args));
    };
    componentWillMount(){
        this.fetchSystemLog();
        const _this=this;
        this.props.dispatch(check_rules(function (rules) {
            _this.setState({
                rules: rules.content
            });
        }));
    }
    Search(e){
        e.preventDefault();
        const _this = this;
        _validate(e,_this,function(data){
            _this.setState({
                module: data.module,
                name: data.name
            });
            let start = _this.state.startValue && _this.state.startValue;
            if(start)
                start = start.getFullYear() + '-' + (start.getMonth() + 1) + '-' + start.getDate() + ' 00:00:00';
            let end = _this.state.endValue && _this.state.endValue;
            if(end)
                end = end.getFullYear() + '-' + (end.getMonth() + 1) + '-' + end.getDate()  + ' 23:59:59';
            _this.fetchSystemLog(data.module, data.name, start, end, 1, _this.state.countPerPage);
        });
    }
    resetFields(){
        const _this = this;
        this.props.form.resetFields()
        _this.setState({
            module: null,
            name: null,
            startValue: null,
            endValue: null
        });
    }
    disabledStartDate(startValue) {
        if (!startValue || !this.state.endValue) {
            return false;
        }
        return startValue.getTime() >= this.state.endValue.getTime();
    }
    disabledEndDate(endValue) {
        if (!endValue || !this.state.startValue) {
            return false;
        }
        return endValue.getTime() <= this.state.startValue.getTime();
    }
    onChange(field, value) {
        //console.log(field, 'change', value);
        this.setState({
            [field]: value,
        });
    }
    onStartChange(value) {
        this.onChange('startValue', value);
    }
    onEndChange(value) {
        this.onChange('endValue', value);
    }
    handleStartToggle({ open }) {
        if (!open) {
            this.setState({ endOpen: true });
        }
    }
    handleEndToggle({ open }) {
        this.setState({ endOpen: open });
    }
    render(){
        const _this = this;
        const { getFieldProps } = _this.props.form;
        const columns = [ {
            title: '用户名',
            dataIndex: 'name',
            width:50
        },{
            title: '模块',
            dataIndex: 'module',
            width:50
        }, {
            title: '日志内容',
            dataIndex: 'msg',
            width:200
        },{
            title: '描述',
            dataIndex: 'detail',
            width:100
        }, {
            title: '时间',
            dataIndex: 'time',
            width:50
        }];
        const pagination = {
            total: this.state.SystemLogLen,
            showSizeChanger: true,
            onShowSizeChange(current, pageSize) {
                _this.setState({
                    current: current,
                    countPerPage: pageSize
                });
                let module = _this.state.module && _this.state.module;
                let name = _this.state.name && _this.state.name;
                let start = _this.state.startValue && _this.state.startValue;
                let end = _this.state.endValue && _this.state.endValue;
                if(start)
                    start = start.getFullYear() + '-' + (start.getMonth() + 1) + '-' + start.getDate() + ' 00:00:00';
                if(end)
                    end = end.getFullYear() + '-' + (end.getMonth() + 1) + '-' + end.getDate() + ' 23:59:59';
                _this.fetchSystemLog(module, name, start, end, current, pageSize);
            },
            onChange(current, filters, sorter) {
                _this.setState({
                    current: current
                });
                let module = _this.state.module && _this.state.module;
                let name = _this.state.name && _this.state.name;
                let start = _this.state.startValue && _this.state.startValue;
                let end = _this.state.endValue && _this.state.endValue;
                if(start)
                    start = start.getFullYear() + '-' + (start.getMonth() + 1) + '-' + start.getDate()  + ' 00:00:00';
                if(end)
                    end = end.getFullYear() + '-' + (end.getMonth() + 1) + '-' + end.getDate()  + ' 23:59:59';
                let countPerPage = _this.state.countPerPage && _this.state.countPerPage;
                _this.fetchSystemLog(module, name, start, end, current, countPerPage);
            }
        };
        let _op = [];
        const _p = {
            '专家':'专家',
            '分享':'分享',
            '微议会议':'微议会议',
            '患者检查':'患者检查',
            '服务产品':'服务产品',
            '用户':'用户',
            '系统管理':'系统管理'

        };
        _.forIn(_p,(v,k)=>{
                _op.push(<Option key={k} value={v}>{k || '--'}</Option>)
        });
        const module = getFieldProps('module', {
            rules: [
                { required: false, message: '请选择模块'}
            ]
        });
        const name = getFieldProps('name', {
            rules: [
                { required: false, message: '请输入用户名'}
            ]
        });
        const timeBegin = getFieldProps('timeBegin', {
            rules: [
                { required: false, type: 'date', message: '请设置查询开始时间' }
            ]
        });
        const timeEnd = getFieldProps('timeEnd', {
            rules: [
                { required: false, type: 'date', message: '请设置查询结束时间' }
            ]
        });
        return (
          <div>
              <Form horizontal className="ant-advanced-search-form" form={this.props.form}>
                  <Row gutter={16}>
                      <Col sm={8}>
                          <FormItem label="模块" labelCol={{ span: 10 }} wrapperCol={{ span: 14 }}>
                              <Select defaultValue={this.state.defValue} placeholder="请选择模块" {...module} style={{ width: 180 }}>
                                  {_op}
                              </Select>
                          </FormItem>
                      </Col>
                      <Col sm={8}>
                          <FormItem label="用户名" labelCol={{ span: 10 }} wrapperCol={{ span: 14 }}>
                              <Input {...name} placeholder="请输入用户名"  style={{ width: 180 }}/>
                          </FormItem>
                      </Col>
                      <Col sm={8}>
                      </Col>
                  </Row>
                  <Row gutter={16}>
                      <Col sm={8}>
                          <FormItem label="开始时间" labelCol={{ span: 10 }} wrapperCol={{ span: 14 }}>
                              <DatePicker {...timeBegin}format="yyyy-MM-dd" size="default"
                                          disabledDate={this.disabledStartDate}
                                          value={this.state.startValue}
                                          placeholder="开始日期"
                                          onChange={this.onStartChange}
                              />
                          </FormItem>
                      </Col>
                      <Col sm={8}>
                          <FormItem label="结束时间" labelCol={{ span: 10 }} wrapperCol={{ span: 14 }}>
                              <DatePicker {...timeEnd} format="yyyy-MM-dd" size="default"
                                          disabledDate={this.disabledEndDate}
                                          value={this.state.endValue}
                                          placeholder="结束日期"
                                          onChange={this.onEndChange}
                                          toggleOpen={this.handleEndToggle}
                              />
                          </FormItem>
                      </Col>
                      <Col sm={8}>
                          <FormItem style={{ textAlign: 'left' }}>
                              <Button type="primary" onClick={this.Search}>
                                  查询
                              </Button>
                              &nbsp;&nbsp;
                              <Button type="ghost" onClick={this.resetFields}>重置</Button>
                          </FormItem>
                      </Col>
                  </Row>
              </Form>
              <div  style={{ height: '10px' }}></div>
              <Table
                pagination={pagination}
                columns={columns}
                dataSource={this.state.systemLogData}
              />
          </div>
        )
    }
}
/*class _LoggerManage extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            active:'1',
            defaultActiveKey:'1'
        };
        this.changeTag = this.changeTag.bind(this)
    }
    componentDidMount(){
        //_maskRender();
    }
    componentWillMount(){
        this.props.dispatch(changePage('logger-manage'))
    }
    changeTag(e){
        this.setState({
            active:e
        })
    }
    render(){
        return (
          <div>

              <Tabs
                defaultActiveKey={this.state.defaultActiveKey}
                activeKey={this.state.active}
                onTabClick={this.changeTag}
                size="default"
              >
                  <TabPane tab="" key="1">
                      <_pane1 user={this.props.user} dispatch={this.props.dispatch} />
                  </TabPane>
                  {/!*<TabPane tab="操作日志" key="2">2
                      /!*<_pane3 user={this.props.user} dispatch={this.props.dispatch} />*!/
                  </TabPane>
                  <TabPane tab="登录日志" key="3">3
                      /!*<_pane3 user={this.props.user} dispatch={this.props.dispatch} />*!/
                  </TabPane>*!/}
              </Tabs>
              <div id="_mask"></div>
          </div>
        )
    }
}*/
const Demo = Form.create()(_pane1);
let LoggerManage;
export default LoggerManage = connect((state)=>{
    const {user} = state.rootReducer,
      {search,query} = state.routing.locationBeforeTransitions;
    return {user,search,query}
})(Demo)

